<template>
  <div>
    <!-- <el-collapse-transition>
      <el-card v-if="searchShow" shadow="never" :body-style="{ padding: '20px 10px 0px 20px' }">
      </el-card>
    </el-collapse-transition> -->
    <el-card shadow="never" class="aui-card--fill">
      <el-tabs v-model="dataForm.cycleType" @tab-click="tabClickEvent">
        <el-tab-pane v-for="(item, i) in this.cycleTypeList" :key="i" :label="item.typeName" :name="item.typeCode"></el-tab-pane>
      </el-tabs>
      <vxe-toolbar :setting="{immediate:true}">
        <template v-slot:buttons>
          <el-form v-if="searchShow" :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
              <!-- <el-select v-model="dataForm.cycleType" placeholder="填报类型" clearable>
                <el-option v-for="item in cycleTypeList" :key="item.typeCode" :label="item.typeName" :value="item.typeCode"></el-option>
              </el-select> -->
              <!-- <el-date-picker v-model="value1" v-bind="pickerOpts" align="right" placeholder="选择日期" :picker-options="{firstDayOfWeek: 1}"> </el-date-picker> -->
              <el-date-picker v-model="pickerVal.day" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                placeholder="选择日期" v-show="dataForm.cycleType === CDATA.VALUE_DAY">
              </el-date-picker>
              <el-date-picker v-model="pickerVal.month" type="month" format="yyyy年M月" value-format="yyyy-MM"
                placeholder="选择月份" v-show="dataForm.cycleType === CDATA.VALUE_MONTH">
              </el-date-picker>
              <!-- 周的value-format格式化会报错 先去掉，代码里面处理 -->
              <el-date-picker v-model="pickerVal.week" type="week" format="yyyy年第W周" placeholder="选择周" :picker-options="{firstDayOfWeek: 1}"
                v-show="dataForm.cycleType === CDATA.VALUE_WEEK"> </el-date-picker>
              <el-date-picker v-model="pickerVal.year" type="year" format="yyyy年" value-format="yyyy" placeholder="选择年"
                v-show="dataForm.cycleType === CDATA.VALUE_YEAR">
              </el-date-picker>
              <uniPickerQuarterly v-model="pickerVal.quarterly" v-show="dataForm.cycleType === CDATA.VALUE_QUARTERLY"></uniPickerQuarterly>
              <uniPickerYearhalf v-model="pickerVal['year_half']" v-show="dataForm.cycleType === CDATA.VALUE_YEAR_HALF"></uniPickerYearhalf>
            </el-form-item>
            <el-form-item>
              <el-select v-model="dataForm.status" placeholder="状态" clearable>
                <el-option v-for="item in statusOpts" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <!--文本框-->
            <el-form-item>
              <el-input v-model="dataForm.title" placeholder="填报主题" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="bindData()">{{ $t('query') }}</el-button>
              <el-button @click="searchReset()">{{ $t('reset') }}</el-button>
              <!-- <el-button @click="clickEvent()">{{ '测试按钮' }}</el-button> -->
              <!-- <el-button type="primary" @click="check()">{{ '检查未报' }}</el-button> -->
            </el-form-item>
          </el-form>
        </template>
        <template v-slot:tools>
          <!-- <el-button icon="el-icon-search" @click="searchShowHandle()" circle></el-button> -->
          <el-button icon="el-icon-refresh" @click="bindData()" circle></el-button>
          <!-- <el-button icon="el-icon-refresh" @click="getDataList()" circle></el-button> -->
        </template>
      </vxe-toolbar>
      <vxe-table ref="xTable" :loading="dataListLoading" class="vxe-table-element" auto-resize @select-change="dataListSelectionChangeHandleVex"
        @select-all="dataListSelectionAllChangeHandleVex" :data="dataList">
        <!-- <vxe-table-column type="checkbox" align="center" width="60"></vxe-table-column> -->
        <vxe-table-column type="index" fixed="left" width="50" align="center"></vxe-table-column>
        <vxe-table-column field="typeName" title="类型" width="100" align="center">
        </vxe-table-column>
        <vxe-table-column field="fillTitle" title="报表">
          <template slot-scope="{row}">
            {{ row.fillTitle+' '+ row.title}}
          </template>
        </vxe-table-column>
        <vxe-table-column field="btypeName" title="填报单位">
          <template slot-scope="{row}">
            <!-- <el-badge value="未填报" class="item"> -->
            {{ row.btypeName+' '}}
            <!-- </el-badge> -->
            <!-- <el-tag v-if="(row.status||0) === 0" size="small" type="danger">{{ '未填报' }}</el-tag> -->
            <el-tag v-if="row.fillDate && row.fillEdate && moment(row.fillDate).isAfter(moment(row.fillEdate))" size="small"
              type="danger">{{ '过期填报' }}</el-tag>
          </template>
        </vxe-table-column>
        <!-- <vxe-table-column field="fillYear" title="填报年度" width="100" align="center">
        </vxe-table-column> -->
        <!-- <vxe-table-column field="fillCycle" title="填报周期">
        </vxe-table-column> -->
        <!-- <vxe-table-column field="title" title="填报主题">
        </vxe-table-column> -->
        <vxe-table-column field="fillDate" title="填报时间" width="140" align="center">
        </vxe-table-column>
        <vxe-table-column title="提报规则" width="180" align="center">
          <template slot-scope="{row}">
            {{ utils.formatMonitor(row) }}
          </template>
        </vxe-table-column>
        <!-- <vxe-table-column field="fillEdate" title="结束时间" width="140" align="center">
        </vxe-table-column> -->
        <vxe-table-column field="status" title="状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1" size="small" type="success">{{ '已填报' }}</el-tag>
            <el-tag v-else size="small" type="danger">{{ '未填报' }}</el-tag>
          </template>
        </vxe-table-column>
        <!-- <vxe-table-column field="updater" title="更新者">
        </vxe-table-column>
        <vxe-table-column field="updateDate" title="最后更新时间">
        </vxe-table-column> -->
        <!-- <vxe-table-column title="handle" width="150" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button v-if="$hasPermission('udf:udfFillingLog:update')" type="text" size="small" icon="el-icon-edit"
              @click="addOrUpdateHandle(scope.row)">{{ $t('update') }}</el-button>
            <el-button v-if="$hasPermission('udf:udfFillingLog:delete')" type="text" size="small" icon="el-icon-delete"
              @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
          </template>
        </vxe-table-column> -->
      </vxe-table>
      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </el-card>
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './udfFillingTask-add-or-update'
import CDATA from './common/constant'
import uniPickerQuarterly from '@/components/uni-picker-quarterly'
import uniPickerYearhalf from '@/components/uni-picker-yearhalf'
import moment, * as utils from './common/utils'

export default {
  mixins: [mixinViewModule],
  data () {
    return {
      createdStatus: false, // created 方法是否执行结束
      initParams: {},
      utils: utils,
      moment: moment,
      CDATA: CDATA,
      searchShow: true,
      mixinViewModuleOptions: {
        activatedIsNeed: false,
        getDataListURL: '/udf/udfFillingLog/selectPageMonitor',
        getDataListIsPage: true
      },
      cycleTypeList: [],
      statusOpts: CDATA.statusOpts,
      pickerVal: {},
      dataForm: {
        cycleType: 'day',
        fillCycle: '',
        title: '',
        status: ''
      }
    }
  },
  components: {
    AddOrUpdate, uniPickerQuarterly, uniPickerYearhalf
  },
  created () {
    this.pickerVal = utils.initDate()
    this.initParams = this.$route.params
    if (this.initParams && this.initParams.cycleType) {
      this.dataForm.cycleType = this.initParams.cycleType
      this.pickerVal[this.initParams.cycleType] = this.initParams.pickerVal[this.initParams.cycleType]
    }
    this.getCycleType().then(() => {
      this.dataForm.cycleType = this.initParams.cycleType ? this.initParams.cycleType : this.cycleTypeList[0].typeCode
      this.bindData().then(() => {
        this.createdStatus = true
      })
    })
  },
  activated () {
    if (this.createdStatus) {
      this.bindData()
    }
  },
  methods: {
    // 处理时间
    delPickerVal () {
      let _pickerVal = utils.delDate(this.pickerVal)
      this.dataForm.fillCycle = _pickerVal[this.dataForm.cycleType]
    },
    tabClickEvent ($event) {
      this.bindData()
    },
    // 废弃
    check () {
      this.$http.post('/udf/udfFillingTask/check', {}).then(() => {
        this.bindData()
      })
    },
    bindData () {
      this.delPickerVal()
      if (!this.dataForm.fillCycle) {
        console.log('error', this.pickerVal, this.dataForm.fillCycle)
        this.$message.error('请选择周期！')
        return
      }
      return this.getDataList()
    },
    getCycleType () {
      return new Promise((resolve, reject) => {
        this.$http.get('/udf/udfCycleType/list', { params: {} }).then(({ data: res }) => {
          if (res.code !== 0) {
            reject(res)
            return
          }
          this.cycleTypeList = res.data
          resolve(res.data)
        })
      })
    },
    emptyFun () { }
  }
}
</script>
